<template>
  <div>
    <!-- Drawer -->
    <div :class="['fixed inset-y-0 left-0 transform bg-white shadow-xl w-64 transition-transform z-50', isOpen ? 'translate-x-0' : '-translate-x-full']">
      <button @click="toggleDrawer" class="absolute top-4 right-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
      <div class="p-4">
        <button class="bg-purple-500 text-white py-2 px-4 rounded">LOGIN</button>
        <nav class="mt-8">
          <ul>
            <li class="mb-4">
              <a href="#" class="flex items-center space-x-2">
                <span class="material-icons">home</span>
                <span>HOME</span>
              </a>
            </li>
            <li class="mb-4">
              <a href="#" class="flex items-center space-x-2">
                <span class="material-icons">attach_money</span>
                <span>COMMISSION PLANS</span>
              </a>
            </li>
            <li class="mb-4">
              <a href="#" class="flex items-center space-x-2">
                <span class="material-icons">help_outline</span>
                <span>FAQ</span>
              </a>
            </li>
            <li class="mb-4">
              <a href="#" class="flex items-center space-x-2">
                <span class="material-icons">description</span>
                <span>TERMS & CONDITIONS</span>
              </a>
            </li>
            <li class="mb-4">
              <a href="#" class="flex items-center space-x-2">
                <span class="material-icons">headset_mic</span>
                <span>CONTACT US</span>
              </a>
            </li>
            <li class="mb-4">
              <a href="#" class="flex items-center space-x-2">
                <span class="material-icons">language</span>
                <span>LANGUAGE</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['toggle'])

function toggleDrawer() {
  emit('toggle')
}
</script>

<style scoped>
.material-icons {
  font-size: 24px;
}
</style>
